
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>IconFont</title>
    <link rel="stylesheet" href="demo.css">
    <link rel="stylesheet" href="iconfont.css">
</head>
<body>
<div class="main markdown">
    <h1>IconFont 图标</h1>
    <ul class="icon_lists clear">

        <li>
            <i class="icon roic roic-fund"></i>
            <div class="name">roic-fund</div>
            <div class="fontclass">.roic-fund</div>
        </li>

        <li>
            <i class="icon roic roic-Investment"></i>
            <div class="name">roic-Investment</div>
            <div class="fontclass">.roic-Investment</div>
        </li>

        <li>
            <i class="icon roic roic-law"></i>
            <div class="name">roic-law</div>
            <div class="fontclass">.roic-law</div>
        </li>

        <li>
            <i class="icon roic roic-lease"></i>
            <div class="name">roic-lease</div>
            <div class="fontclass">.roic-lease</div>
        </li>

        <li>
            <i class="icon roic roic-insurance"></i>
            <div class="name">roic-insurance</div>
            <div class="fontclass">.roic-insurance</div>
        </li>

        <li>
            <i class="icon roic roic-pay"></i>
            <div class="name">roic-pay</div>
            <div class="fontclass">.roic-pay</div>
        </li>

        <li>
            <i class="icon roic roic-grant"></i>
            <div class="name">roic-grant</div>
            <div class="fontclass">.roic-grant</div>
        </li>

        <li>
            <i class="icon roic roic-report-sheet"></i>
            <div class="name">roic-report-sheet</div>
            <div class="fontclass">.roic-report-sheet</div>
        </li>

        <li>
            <i class="icon roic roic-partner"></i>
            <div class="name">roic-partner</div>
            <div class="fontclass">.roic-partner</div>
        </li>

        <li>
            <i class="icon roic roic-setting"></i>
            <div class="name">roic-setting</div>
            <div class="fontclass">.roic-setting</div>
        </li>

        <li>
            <i class="icon roic roic-stock"></i>
            <div class="name">roic-stock</div>
            <div class="fontclass">.roic-stock</div>
        </li>

        <li>
            <i class="icon roic roic-showcase"></i>
            <div class="name">roic-showcase</div>
            <div class="fontclass">.roic-showcase</div>
        </li>

        <li>
            <i class="icon roic roic-user"></i>
            <div class="name">roic-user</div>
            <div class="fontclass">.roic-user</div>
        </li>

        <li>
            <i class="icon roic roic-rules"></i>
            <div class="name">roic-rules</div>
            <div class="fontclass">.roic-rules</div>
        </li>

        <li>
            <i class="icon roic roic-workflow"></i>
            <div class="name">roic-workflow</div>
            <div class="fontclass">.roic-workflow</div>
        </li>

        <li>
            <i class="icon roic roic-vouch"></i>
            <div class="name">roic-vouch</div>
            <div class="fontclass">.roic-vouch</div>
        </li>

        <li>
            <i class="icon roic roic-approve-reply"></i>
            <div class="name">roic-approve-reply</div>
            <div class="fontclass">.roic-approve-reply</div>
        </li>

        <li>
            <i class="icon roic roic-asset"></i>
            <div class="name">roic-asset</div>
            <div class="fontclass">.roic-asset</div>
        </li>

        <li>
            <i class="icon roic roic-account"></i>
            <div class="name">roic-account</div>
            <div class="fontclass">.roic-account</div>
        </li>

        <li>
            <i class="icon roic roic-authc"></i>
            <div class="name">roic-authc</div>
            <div class="fontclass">.roic-authc</div>
        </li>

        <li>
            <i class="icon roic roic-bill"></i>
            <div class="name">roic-bill</div>
            <div class="fontclass">.roic-bill</div>
        </li>

        <li>
            <i class="icon roic roic-apply"></i>
            <div class="name">roic-apply</div>
            <div class="fontclass">.roic-apply</div>
        </li>

        <li>
            <i class="icon roic roic-bond"></i>
            <div class="name">roic-bond</div>
            <div class="fontclass">.roic-bond</div>
        </li>

        <li>
            <i class="icon roic roic-chargeup"></i>
            <div class="name">roic-chargeup</div>
            <div class="fontclass">.roic-chargeup</div>
        </li>

        <li>
            <i class="icon roic roic-approval"></i>
            <div class="name">roic-approval</div>
            <div class="fontclass">.roic-approval</div>
        </li>

        <li>
            <i class="icon roic roic-change"></i>
            <div class="name">roic-change</div>
            <div class="fontclass">.roic-change</div>
        </li>

        <li>
            <i class="icon roic roic-commercial"></i>
            <div class="name">roic-commercial</div>
            <div class="fontclass">.roic-commercial</div>
        </li>

        <li>
            <i class="icon roic roic-creditlimit"></i>
            <div class="name">roic-creditlimit</div>
            <div class="fontclass">.roic-creditlimit</div>
        </li>

        <li>
            <i class="icon roic roic-customer"></i>
            <div class="name">roic-customer</div>
            <div class="fontclass">.roic-customer</div>
        </li>

        <li>
            <i class="icon roic roic-credit"></i>
            <div class="name">roic-credit</div>
            <div class="fontclass">.roic-credit</div>
        </li>

        <li>
            <i class="icon roic roic-capital"></i>
            <div class="name">roic-capital</div>
            <div class="fontclass">.roic-capital</div>
        </li>

        <li>
            <i class="icon roic roic-document"></i>
            <div class="name">roic-document</div>
            <div class="fontclass">.roic-document</div>
        </li>

        <li>
            <i class="icon roic roic-financial"></i>
            <div class="name">roic-financial</div>
            <div class="fontclass">.roic-financial</div>
        </li>

        <li>
            <i class="icon roic roic-financing"></i>
            <div class="name">roic-financing</div>
            <div class="fontclass">.roic-financing</div>
        </li>

        <li>
            <i class="icon roic roic-goods"></i>
            <div class="name">roic-goods</div>
            <div class="fontclass">.roic-goods</div>
        </li>

        <li>
            <i class="icon roic roic-contract"></i>
            <div class="name">roic-contract</div>
            <div class="fontclass">.roic-contract</div>
        </li>

        <li>
            <i class="icon roic roic-invest-pre"></i>
            <div class="name">roic-invest-pre</div>
            <div class="fontclass">.roic-invest-pre</div>
        </li>

        <li>
            <i class="icon roic roic-innovate"></i>
            <div class="name">roic-innovate</div>
            <div class="fontclass">.roic-innovate</div>
        </li>

        <li>
            <i class="icon roic roic-invest-midst"></i>
            <div class="name">roic-invest-midst</div>
            <div class="fontclass">.roic-invest-midst</div>
        </li>

        <li>
            <i class="icon roic roic-invest-post"></i>
            <div class="name">roic-invest-post</div>
            <div class="fontclass">.roic-invest-post</div>
        </li>

        <li>
            <i class="icon roic roic-invoice"></i>
            <div class="name">roic-invoice</div>
            <div class="fontclass">.roic-invoice</div>
        </li>

        <li>
            <i class="icon roic roic-logistic"></i>
            <div class="name">roic-logistic</div>
            <div class="fontclass">.roic-logistic</div>
        </li>

        <li>
            <i class="icon roic roic-isp"></i>
            <div class="name">roic-isp</div>
            <div class="fontclass">.roic-isp</div>
        </li>

        <li>
            <i class="icon roic roic-oppor"></i>
            <div class="name">roic-oppor</div>
            <div class="fontclass">.roic-oppor</div>
        </li>

        <li>
            <i class="icon roic roic-post-supervisio"></i>
            <div class="name">roic-post-supervisio</div>
            <div class="fontclass">.roic-post-supervisio</div>
        </li>

        <li>
            <i class="icon roic roic-risk"></i>
            <div class="name">roic-risk</div>
            <div class="fontclass">.roic-risk</div>
        </li>

        <li>
            <i class="icon roic roic-risk-warning"></i>
            <div class="name">roic-risk-warning</div>
            <div class="fontclass">.roic-risk-warning</div>
        </li>

        <li>
            <i class="icon roic roic-valuation"></i>
            <div class="name">roic-valuation</div>
            <div class="fontclass">.roic-valuation</div>
        </li>

        <li>
            <i class="icon roic roic-bank-acceptance"></i>
            <div class="name">roic-bank-acceptance</div>
            <div class="fontclass">.roic-bank-acceptance</div>
        </li>

        <li>
            <i class="icon roic roic-operation"></i>
            <div class="name">roic-operation</div>
            <div class="fontclass">.roic-operation</div>
        </li>

        <li>
            <i class="icon roic roic-rating"></i>
            <div class="name">roic-rating</div>
            <div class="fontclass">.roic-rating</div>
        </li>

        <li>
            <i class="icon roic roic-warning"></i>
            <div class="name">roic-warning</div>
            <div class="fontclass">.roic-warning</div>
        </li>

        <li>
            <i class="icon roic roic-project"></i>
            <div class="name">roic-project</div>
            <div class="fontclass">.roic-project</div>
        </li>

        <li>
            <i class="icon roic roic-download"></i>
            <div class="name">roic-download</div>
            <div class="fontclass">.roic-download</div>
        </li>

        <li>
            <i class="icon roic roic-file-text"></i>
            <div class="name">roic-file-text</div>
            <div class="fontclass">.roic-file-text</div>
        </li>

        <li>
            <i class="icon roic roic-or"></i>
            <div class="name">roic-or</div>
            <div class="fontclass">.roic-or</div>
        </li>

        <li>
            <i class="icon roic roic-array"></i>
            <div class="name">roic-array</div>
            <div class="fontclass">.roic-array</div>
        </li>

        <li>
            <i class="icon roic roic-and"></i>
            <div class="name">roic-and</div>
            <div class="fontclass">.roic-and</div>
        </li>

        <li>
            <i class="icon roic roic-amarsoft"></i>
            <div class="name">roic-amarsoft</div>
            <div class="fontclass">.roic-amarsoft</div>
        </li>

        <li>
            <i class="icon roic roic-rober"></i>
            <div class="name">roic-rober</div>
            <div class="fontclass">.roic-rober</div>
        </li>

        <li>
            <i class="icon roic roic-erd"></i>
            <div class="name">roic-erd</div>
            <div class="fontclass">.roic-erd</div>
        </li>

        <li>
            <i class="icon roic roic-amix"></i>
            <div class="name">roic-amix</div>
            <div class="fontclass">.roic-amix</div>
        </li>

        <li>
            <i class="icon roic roic-emix"></i>
            <div class="name">roic-emix</div>
            <div class="fontclass">.roic-emix</div>
        </li>

    </ul>

    <h2 id="font-class-">font-class引用</h2>
    <hr>

    <p>font-class是unicode使用方式的一种变种，主要是解决unicode书写不直观，语意不明确的问题。</p>
    <p>与unicode使用方式相比，具有如下特点：</p>
    <ul>
        <li>兼容性良好，支持ie8+，及所有现代浏览器。</li>
        <li>相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。</li>
        <li>因为使用class来定义图标，所以当要替换图标时，只需要修改class里面的unicode引用。</li>
        <li>不过因为本质上还是使用的字体，所以多色图标还是不支持的。</li>
    </ul>
    <p>使用步骤如下：</p>
    <h3 id="-fontclass-">第一步：引入项目下面生成的fontclass代码：</h3>


    <pre><code class="lang-js hljs javascript"><span class="hljs-comment">&lt;link rel="stylesheet" type="text/css" href="./iconfont.css"&gt;</span></code></pre>
    <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
    <pre><code class="lang-css hljs">&lt;<span class="hljs-selector-tag">i</span> <span class="hljs-selector-tag">class</span>="<span class="hljs-selector-tag">roic</span> <span class="hljs-selector-tag">xxx</span>"&gt;&lt;/<span class="hljs-selector-tag">i</span>&gt;</code></pre>
    <blockquote>
        <p>"roic"是你项目下的font-family。可以通过编辑项目查看，默认是"iconfont"。</p>
    </blockquote>
</div>
</body>
</html>
